<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>情景文本 | 辅助类</title>
    <link rel="stylesheet" href="../../assets/dest/css/basic_reset.css">
    <link rel="stylesheet" href="../../assets/dest/css/basic_font.css">
	<link rel="stylesheet" href="../../assets/dest/css/util_text.css">
	<link rel="stylesheet" href="../demo-lib/doc.css">
	<style>
		.text {margin: 10px .25em; line-height: 1.5; color: #009dff; border-bottom: 1px dotted #5e7a8c; cursor: pointer;}
		.border {padding: 5px 10px; margin: 5px 10px; cursor: pointer; border: 1px solid #ddd;}
	</style>
</head>
<body>
	<div class="header">
		<dl>
			<dt>项目：</dt>
			<dd>情景文本</dd>
			<dt>描述：</dt>
			<dd>通过为不同场景的文字添加不同颜色来展示诉求意图。</dd>
			<dt>资源：</dt>
			<dd>
				<code>basic_reset.css</code>
				<code>util_text.css</code>
			</dd>
		</dl>
	</div>
	<div class="mainbox">
		<p>
			信息文本<code>(.u-text-info)</code>:
			<span class="u-text-info">信息更新于今天</p>
		<p>
			成功文本<code>(.u-text-success)</code>:
			<span class="u-text-success">信息保存成功！</p>
		<p>
			告警文本<code>(.u-text-warning)</code>:
			<span class="u-text-warning">注意，这里有点问题！</p>
		<p>
			危险文本<code>(.u-text-danger)</code>:
			<span class="u-text-danger">请求失败！</p>
		<p>
			弱信息文本<code>(.u-text-muted)</code>:
			<span class="u-text-muted">昵称会展示在个人首页。</p>
		<p>
			解释标注文本<code>(.u-text-explan)</code>:
			材质：石墨烯
			<a href="https://baike.baidu.com/item/%E7%9F%B3%E5%A2%A8%E7%83%AF/4458070?fr=aladdin" target="_blank">
				<small class="u-text-explan">什么是石墨烯？</small>
			</a>
		</p>
	</div>
</body>
</html>
